import { Modal, type UploadProps } from "ant-design-vue";
import Upload, { type UploadFile } from "ant-design-vue/es/upload";
import { computed, defineComponent, ref, type PropType } from "vue";

export default defineComponent({
  props: {
    value: {
      type: [Array, String] as PropType<string[] | string>,
    },
    accept: {
      type: String,
      // default: 'image/png,image/jpeg,image/jpg',
    },
    maxCount: {
      type: Number,
      default: 1,
    },
    type: {
      type: String as PropType<"image" | "file">,
      default: "file",
    },
    uploadProps: {
      type: Object as PropType<UploadProps>,
      default: () => ({}),
    },
  },
  setup(props, ctx) {
    const fileList = computed({
      get: () => {
        if (props.maxCount === 1) {
          return props.value
            ? [
                {
                  url: props.value,
                  thumbUrl: props.value,
                  name: "temp",
                  percent: 100,
                  crossOrigin: "anonymous",
                  status: "done",
                },
              ]
            : [];
        } else {
          return (props.value || []).map((url) => ({
            url,
            thumbUrl: url,
            name: "temp",
            percent: 100,
            crossOrigin: "anonymous",
            status: "done",
          }));
        }
      },
      set: (fileList: UploadFile[]) => {
        if (props.maxCount === 1) {
          ctx.emit(
            "update:value",
            fileList[0].url || fileList[0].thumbUrl || ""
          );
        } else {
          ctx.emit(
            "update:value",
            fileList.map((file) => file.url || file.thumbUrl || "")
          );
        }
      },
    });
    const previewVisible = ref(false);
    const previewImage = ref("");
    const previewTitle = ref("");
    const onUpdate = (fileList: UploadFile[]) => {
      if (fileList.length === 0) {
        ctx.emit("update:value", "");
      } else {
        ctx.emit(
          "update:value",
          fileList.map((file) => file.url || file.thumbUrl || "")
        );
      }
    };
    const handlePreview = (file: UploadFile) => {
      previewVisible.value = true;
      previewImage.value = file.url || file.thumbUrl || "";
      previewTitle.value = file.name || "";
    };
    const handleCancel = () => {
      previewVisible.value = false;
    };

    const accept = computed(() => {
      if (props.type === "image") {
        return props.accept || "image/png,image/jpeg,image/jpg";
      }
      return props.accept;
    });

    return () => (
      <div>
        <Upload
          {...props.uploadProps}
          file-list={fileList.value}
          onUpdate:fileList={onUpdate}
          action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
          onPreview={handlePreview}
          accept={accept.value}
          list-type={props.type === "image" ? "picture-card" : "text"}
        >
          {fileList.value.length < props.maxCount && (
            <div>
              <div class="leading-none text-[30px]">+</div>
              <div style="margin-top: 8px">Upload</div>
            </div>
          )}
        </Upload>
        {props.type === "image" && (
          <Modal
            open={previewVisible.value}
            title={previewTitle.value}
            footer={null}
            onCancel={handleCancel}
          >
            <img alt="example" style="width: 100%" src={previewImage.value} />
          </Modal>
        )}
      </div>
    );
  },
});
